<template>
  <view class="MyTeam animate__animated animate__bounceInRight">
    <view class="left">
      <image :src="teamDetail.cover" class="teamImg"></image>
    </view>
    <view class="center">
      <view class="nameInfo">
        <view class="teamName">{{ teamDetail.title }}</view>
        <view class="time"
          >创建时间：{{
            $formatTime.formatTimeToHHMMSS(teamDetail.createTime)
          }}</view
        >
        <view class="people"
          >队伍人员：{{ teamDetail.userList.length + 1 }} /
          {{ teamDetail.number }}</view
        >
        <view class="tags">
          <van-tag
            :type="tagColor[index]"
            size="medium"
            plain
            class="tag"
            v-for="(item, index) in teamDetail.tags"
            :key="index"
            >{{ item }}</van-tag
          >
        </view>
      </view>
      <view class="btnGroup">
        <van-button
          block
          size="small"
          class="btn"
          type="primary"
          @click="changeTeamInfo"
          custom-style="width:100rpx;font-size:20rpx;height:55rpx"
          >修改信息</van-button
        >
        <van-button
          v-if="teamDetail.userList.length"
          block
          size="small"
          type="primary"
          color="#aaa"
          class="btn"
          custom-style="width:100rpx;font-size:20rpx;height:55rpx"
          @click="handleKickPeople"
          >踢出队员</van-button
        >
        <van-button
          v-if="!isFull"
          block
          size="small"
          color="#029AFC"
          class="btn"
          custom-style="width:100rpx;font-size:20rpx;height:55rpx"
          @click="handleInvitePeople"
          >邀请加入</van-button
        >
        <van-button
          block
          size="small"
          color="#05A47D"
          id="kickBtn"
          class="btn"
          custom-style="width:100rpx;font-size:20rpx;height:55rpx"
          @click="handleDeleteTeam"
          >解散队伍</van-button
        >
      </view>
    </view>
    <view class="tipTag" style="background: #05a47d" v-if="isFull">满员</view>
    <view class="tipTag" style="background: #dd6161" v-if="isPrivate"
      >私密</view
    >
  </view>
</template>

<script>
export default {
  name: "TeamItem",
  props: {
    teamDetail: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      tagColor: ["primary", "danger", "success"],
      isFull: false,
      isPrivate: false,
      buttonStatus: 0,
    };
  },
  mounted() {
    this.initStatus();
  },

  methods: {
    // 修改队伍信息
    changeTeamInfo() {
      const item = {};
      item._id = this.teamDetail._id;
      item.title = this.teamDetail.title;
      item.introduce = this.teamDetail.introduce;
      item.password = this.teamDetail.password;
      item.tags = this.teamDetail.tags;
      this.$emit("changeTeamInfo", item);
    },

    // 踢出人员
    handleKickPeople() {
      if (!this.teamDetail.userList.length) {
        uni.showToast({
          icon: "error",
          title: "目前还没有队员",
        });
        return;
      }

      // 获取踢出按钮的位置信息，用于初始化kickDialog位置动画
      uni
        .createSelectorQuery()
        .in(this)
        .select("#kickBtn")
        .boundingClientRect((rect) => {
          const position = {},
            teamInfo = {};
          position.left = parseInt(rect.left);
          position.top = parseInt(rect.top);
          teamInfo.userList = this.teamDetail.userList;
          teamInfo.teamName = this.teamDetail.title;
          teamInfo.teamAuthor = this.teamDetail.author.nickName;
          teamInfo.teamId = this.teamDetail._id;
          this.$emit("openKickDialog", { position, teamInfo });
        })
        .exec();
    },

    // 解散队伍
    handleDeleteTeam() {
      uni.showModal({
        title: "解散队伍",
        content: "确定要解散这支队伍吗?",
        cancelColor: "#aaa",
        confirmColor: "#05A47D",
        success: async (res) => {
          if (res.confirm) {
            this.deleteTeamData(); // 移除队伍信息
          }
        },
      });
    },

    // 邀请他人加入队伍
    handleInvitePeople() {
      uni.navigateTo({
        url: `/pages/InvitePeople/InvitePeople?teamDetail=${encodeURIComponent(
          JSON.stringify(this.teamDetail)
        )}`,
      });
    },

    // 解散队伍信息
    async deleteTeamData() {
      uni.showLoading({
        title: "删除中",
      });
      try {
        const userId = this.teamDetail._openid;
        await this.$store.dispatch("m_team/dissolveTeam", this.teamDetail); // 移除队伍信息
        await this.$store.dispatch("getUserInfo", { type: 0, userId }); // 重新获取用户信息
        this.$emit("refreshTeamList"); // 重新获取队伍列表信息
        uni.hideLoading();
        uni.showToast({
          icon: "success",
          title: "解散成功",
        });
      } catch (err) {
        uni.hideLoading();
        uni.showToast({
          icon: "error",
          title: "解散失败",
        });
      }
    },

    initStatus() {
      // 队伍已满
      if (this.teamDetail.number === this.teamDetail.userList.length + 1) {
        this.isFull = true;
        return;
      }
      // 队伍设置私密
      if (this.teamDetail.password.length) {
        this.isPrivate = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.MyTeam {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx;
  box-sizing: border-box;
  width: 100%;
  height: 270rpx;
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 10rpx;
  .tipTag {
    position: absolute;
    box-sizing: border-box;
    width: 200rpx;
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 10rpx 20rpx;
    color: #fff;
    right: -50rpx;
    top: 20rpx;
    font-size: 26rpx;
    transform: rotate(45deg);
  }
  .left {
    width: 190rpx;
    height: 200rpx;
    overflow: hidden;
    margin-right: 20rpx;
    .teamImg {
      width: 100%;
      height: 100%;
    }
  }
  .center {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;

    .nameInfo {
      width: 100%;
      .teamName {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
      }
      .time,
      .people {
        font-size: 24rpx;
        color: #999;
      }
    }
    .tags {
      width: 100%;
      margin: 10rpx 0;
      display: flex;
      .tag {
        margin-right: 20rpx;
      }
    }
    .btnGroup {
      display: flex;
      margin-top: 10rpx;
      .btn {
        margin-right: 10rpx;
      }
    }
  }
}
</style>
